<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type='text/javascript' src='../jquery-1.10.2.js'></script>
<!--<script type='text/javascript' src='jquery-tmpl.js'></script>-->
<script type='text/javascript' src='../knockout-2.3.0.js'></script>
</head>
<body>
<div>You've clicked <span data-bind="text: numberOfClicks">&nbsp;</span> times</div> 

<button data-bind="click: registerClick, enable: !hasClickedTooManyTimes()">Click me</button> 

<div data-bind="visible: hasClickedTooManyTimes">
    That's too many clicks! Please stop before you wear out your fingers.
    <button data-bind="click: function() { numberOfClicks(0) }">Reset clicks</button>
</div>
<script>
var clickCounterViewModel = function () {
    this.numberOfClicks = ko.observable(0); 

    this.registerClick = function () {
        this.numberOfClicks(this.numberOfClicks() + 1);
    } 

    this.hasClickedTooManyTimes = ko.dependentObservable(function () {
        return this.numberOfClicks() >= 3;
    }, this);
};

ko.applyBindings(new clickCounterViewModel());
</script>

</body>
</html>